<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/vue-2.6.12.js"></script>
    <script src="js/vue-router-3.4.9.js"></script>
    <script src="js/axios-0.21.0.js"></script>
    <script src="js/qs-6.9.4.js"></script>
</head>
<body>

<div id="app">

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr style="color: coral">
    <router-view></router-view>

</div>

<template id = "login">

    <div>
        <form>
            用户名:<input type="text" name="username" v-model="user.name"> <br/>

            密码:<input name="password" type="password" v-model="user.password"> <br/>

            验证码:<input name="valueCode" type="text" v-model = "user.valueCode"> <br/>

            <button type="button" @click="login">登录</button>

            <span>{{msg}}</span>

        </form>
    </div>


</template>

<template id = "register">

    <div>
        <form>
            用户名:<input type="text" name="username" v-model="user.name">  <br/>

            密码:<input name="password" type="password" v-model="user.password"> <br/>

            确认密码:<input name="password2" type="password"  v-model="password2"> <br/>

            验证码:<input name="valueCode" type="text" v-model = "valueCode"> <br/>

            <button type="button" @click="register">注册</button>

        </form>
    </div>


</template>

<script>

    let login = {
        template:"#login",
        data:function () {
            return{
                user:{name:"",password:""},
               valueCode:"",
                msg:""

            }

        },
        methods: {
            login:function () {

                axios.post("/day02_json/login",Qs.stringify(this.user)).then(resp=>{
                    if (resp.data.success){
                        this.msg = resp.data.data.name;
                        window.href="/day02_json/bookList";
                    }else {
                        this.msg = resp.data.msg;
                    }
                }).catch(error=>{
                    this.msg = "出现异常"
                })

            }
        }
    }

    let register = {
        template: "#register",
        data:function () {

            return{
                user:{},
                valueCode:"",
                password2:""
            }

        },
        methods:{
            register:function () {

            }
        }
    }

    let app = new Vue({

        el:"#app",
        data:{},
        methods:{},

        router:new VueRouter({

            routes:[

                {name:"login",path:"/login",component:login},
                {name:"register",path:"/register",component: register},
                {name:"default",path: "/",redirect:"/login"}


            ]

        })


    })

</script>

</body>
</html>